<template>
    <div class="nav-bar" ref="navBar" :class="{'nav-bar-fixed':isFixed,'nav-bar-shadow':hasShadow}"
         :style="{'background-color':backgroundColor,color:color}">
        <div class="nav-bar-header">
            <div class="nav-bar-header-btn nav-bar-header-left" @click="onClickLeft">
                <div v-if="leftIconClass.length">
                    <i :class="leftIconClass" :style="{color:color}"></i>
                </div>
                <div v-if="leftText.length" class="nav-bar-btn-text"
                     :class="{'nav-bar-btn-icon-left':!leftIconClass.length}">{{leftText}}
                </div>
                <!--向导航栏左侧插入-->
                <slot name="left"></slot>
            </div>
            <div class="nav-bar-container">
                <div v-if="title.length" class="nav-bar-container-title" :style="{color:color}">{{title}}</div>
                <!-- 标题插槽 -->
                <slot></slot>
            </div>
            <div class="nav-bar-header-btn nav-bar-header-right" @click="onClickRight">
                <div v-if="rightIconClass.length">
                    <i v-for="item in rightIconClass" :class="item" :style="{paddingLeft:'8px',color:color,fontSize:size}"></i>
                </div>
                <div v-if="rightText.length&&!rightIconClass.length" class="nav-bar-btn-text">{{rightText}}</div>
                <!--向导航栏右侧插入-->
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Emit} from "vue-property-decorator";

    @Component({})
    //导航栏，主要用于头部
    export default class NavBar extends Vue {
        //标题文字
        @Prop({default: "", type: String})
        private title !: string;
        //左侧按钮文本
        @Prop({default: "", type: String})
        private leftText !: string;
        //右侧按钮文本
        @Prop({default: "", type: String})
        private rightText !: string;
        //左侧图标样式，根据自己使用图标字体库填入
        @Prop({default: "", type: String})
        private leftIconClass !: string;
        //右侧图标样式，根据自己使用图标字体库填入
        @Prop({default: () => [], type: Array})
        private rightIconClass !: Array<string>;
        //是否固定顶部
        @Prop({default: true, type: Boolean})
        private fixed !: boolean;
        //导航栏下是否有阴影
        @Prop({default: false, type: Boolean})
        private shadow !: boolean;
        //图标和文字颜色
        @Prop({default: "#000000", type: String})
        private color !: string;
        //图标和文字大小
        @Prop({default: "18px", type: String})
        private size !: string;
        //导航栏背景颜色
        @Prop({default: "#FFFFFF", type: String})
        private backgroundColor !: string;

        private navBar: any = {};

        private mounted() {
            this.navBar = this.$refs.navBar;
        }

        // @vuese
        // 获取标题栏高度，可以使用self.barHeight返回
        public get barHeight(): number {
            return this.navBar.offsetHeight;
        }

        private get isFixed(): boolean {
            return String(this.fixed) === "true";
        }

        private get hasShadow(): boolean {
            let backgroundColor = this.backgroundColor;
            switch (String(this.shadow)) {
                case "true":
                    return true;
                case "false":
                    return false;
                default:
                    return backgroundColor !== "transparent" && backgroundColor.indexOf("rgba") < 0;
            }
        }

        //左侧按钮点击时触发
        @Emit("clickLeft")
        private onClickLeft(): void {

        }

        //右侧按钮点击时触发
        @Emit("clickRight")
        private onClickRight(): void {

        }

    }
</script>

<style scoped lang="stylus">
    @import "style/compatible-safe-area.styl"
    .nav-bar
        display block;
        position relative;
        width 100%;
        background-color #FFFFFF;
        overflow hidden;
        padding-top var(--safe-area-inset-top) !important;


    .nav-bar div
        line-height 44px;
        font-weight 400;


    .nav-bar-shadow
        box-shadow 0 .5px 3px #ccc;


    .nav-bar.nav-bar-fixed
        position fixed;
        z-index 39;


    .nav-bar-header
        flex-direction row;
        width 100%;
        height 44px;
        line-height 44px;
        font-size 16px;


    .nav-bar-header .nav-bar-header-btn
        display inline-flex;
        flex-wrap nowrap;
        flex-shrink 0;
        width max-content;
        padding 0 15px;
        font-size 12px;

    .nav-bar-container
        padding 0 5px;
        width max-content;
        position absolute;
        top var(--safe-area-inset-top) !important;
        left 50%;
        transform translateX(-50%);

    .nav-bar-container-title
        font-size 15px;
        height 44px;
        line-height 44px;
        text-align center;
        width max-content

    .nav-bar-header-left
        float left;
        width max-content

    .nav-bar-header-right
        float right;
        width max-content

</style>
